@import "../config.less";

@cls: @{perfix}-ex-co-arrow;

.@{cls} {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
    width: 20px;
    height: 20px;
    justify-content: center;

    > span {
        width: 8px;
        height: 1px;
        border-radius: 10px;
    }

    &:hover {
        opacity: 0.8;
        transition: opacity 0.3s ease-out;
    }
}

.@{cls}-left {
    transform: rotate(45deg);
    transform-origin: right center;
    transition: transform 0.3s ease-out;
}

.@{cls}-right {
    transform: rotate(-45deg);
    transform-origin: left center;
    transition: transform 0.3s ease-out;
}

.@{cls}-down {
    .@{cls}-left {
        transform: rotate(-45deg);
        transition: transform 0.3s ease-out;
    }

    .@{cls}-right {
        transform: rotate(45deg);
        transition: transform 0.3s ease-out;
    }
}
